<template>
  <div :class="['page-layout', isFullscreen && 'is-fullscreen']">
    <component
      :is="useViewScale ? CjuiViewScale : 'div'"
      v-bind="viewScaleProps"
    >
      <!-- 头部插槽 -->
      <slot v-if="headerTitle" name="header">
        <div class="page-header">
          <span class="header-left-time">{{ dateText }}</span>
          <div class="header-title">{{ headerTitle }}</div>
          <cjui-icon
            class="header-right-screen"
            :icon="isFullscreen ? 'fa-solid:compress' : 'fa-solid:expand'"
            :size="18"
            @click="toggleFullscreen"
          />
        </div>
      </slot>

      <!-- 内容区插槽 -->
      <slot></slot>
    </component>
  </div>
</template>

<script lang="ts" setup>
import { useFullscreen } from '@vueuse/core'
import { dayjs } from 'element-plus'

defineProps({
  useViewScale: {
    type: Boolean,
    default: true,
  },
  viewScaleProps: {
    type: Object,
    default: () => ({}),
  },
  headerTitle: {
    type: String,
    default: '大数据看板Dark风格-组件示例',
  },
})

const dateText = ref(dayjs().format('YYYY/MM/DD HH:mm:ss'))
let timer: any = null

const { toggle, isFullscreen } = useFullscreen()
function toggleFullscreen() {
  toggle()
}

onMounted(() => {
  timer = setInterval(() => {
    dateText.value = dayjs().format('YYYY/MM/DD HH:mm:ss')
  }, 1000)
})
onBeforeUnmount(() => {
  clearInterval(timer)
})
</script>

<style lang="scss" scoped>
// common
.page-layout {
  :deep(.cjui-loading-progress) {
    --cjui-color-primary: #00cddc;
    --cjui-loading-modal-color: rgba(0, 0, 0, 0.1);
  }
}

// page
.page-layout {
  color: #daf9ff;
  width: 100%;
  height: 100%;
  box-sizing: border-box;
  background: #033c76;
  background: radial-gradient(
    farthest-corner,
    #034f8e,
    #034987,
    #02366d,
    #002353
  );
  // background: url('/imgs/business/visual-dark/page-bg-3.png');
  background: url('/imgs/business/visual-dark/page-bg-6.jpg');
  background-size: cover;
  overflow: auto;

  &.is-fullscreen {
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    z-index: 999;
  }
}

.page-header {
  width: 100%;
  height: 100px;
  box-sizing: border-box;
  position: relative;
  background: url('/imgs/business/visual-dark/header-bg-1.png');
  background-size: 100% 100%;
}

.header-left-time {
  position: absolute;
  top: 14px;
  left: 52px;
  font-family: electronicFont;
  font-size: 18px;
}

.header-title {
  width: 100%;
  height: 100px;
  font-size: 32px;
  font-weight: bold;
  line-height: 100px;
  text-align: center;
}

.header-right-screen {
  position: absolute;
  top: 16px;
  right: 52px;
  cursor: pointer;
}
</style>
